<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/7/27
  Time: 19:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Test</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <style type="text/css">
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
        .layui-table-cell{
            text-align: center;
            height: 50px;
            white-space: normal;
        }
    </style>
</head>
<body>
<%--批量上传--%>
<button type="button" class="layui-btn" id="upload">上传文件</button>
<%--批量下载--%>
<button type="button" class="layui-btn" id="download">批量下载</button>
<%--添加表单--%>
    <div class="layui-form-item" id="uploadExcel" style="display: none;text-align: center">
        <label class="layui-form-label">上传</label>
        <button type="button" class="layui-btn" name="file" id="uploadOne">
            <i class="layui-icon">&#xe67c;</i>点击上传
        </button>
    </div>
<%--修改表单--%>
<form class="layui-form" id="updateForm" lay-filter="updateForm" style="display: none;padding-right: 60px;padding-top: 20px" method="post"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <input type="hidden" name="brandId" value=""/>
    <div class="layui-form-item">
        <label class="layui-form-label">品牌名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">品牌首字母</label>
        <div class="layui-input-block">
            <input type="text" name="firstLetter" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input type="text" name="sort" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%--给文件名定义一个隐藏属性，以便将数据保存到数据库中--%>
    <input type="hidden" name="logo1" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">品牌LOGO</label>
        <button type="button" class="layui-btn" name="file" id="test1">
            <i class="layui-icon">&#xe67c;</i>点击上传
        </button>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">专区大图</label>
        <div class="layui-input-block">
            <input type="text" name="bigPic" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">品牌描述</label>
        <div class="layui-input-block">
            <input type="text" name="brandStory" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否显示</label>
        <div class="layui-input-block">
            <input type="radio" name="showStatus" value="0" title="不显示" checked="checked"/>
            <input type="radio" name="showStatus" value="1" title="显示"/>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="up">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--渲染table表格--%>
<table id="demo" lay-filter="test" class="layui-table-cell"></table>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["table","form","layer","upload"],function () {
        var table = layui.table;
        var layer = layui.layer;
        table.render({
            elem:'#demo',
            limit:5,
            limits:[5,10,20],
            url:'${pageContext.request.contextPath}/cmfz-guru/selectAllByPage',
            page:true,
            cols:[[
                {type:'checkbox'},
                {field:'guruId',title:'上师编号',height:50},
                {field:'guruName',title:'上师姓名',height:50},
                {field:'guruImage',height:50,title:'上师图片',templet:function (obj) {
                        return "<img src='${pageContext.request.contextPath}/img/guru/" + obj.guruImage + "' style='height: 50px'>";
                }},
                {field:'guruNickname',height:50,title:'上师法号'},
                {field:'guruStatus',height:50,title:'上师状态',templet:function (obj) {
                    return obj.guruStatus == 0 ? "正常" : "冻结";
                    }},
                {fixed:'right',title:'操作',height:50,align:'center',toolbar:'#barDemo'}
            ]]
        });
        table.on('tool(test)',function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent == "edit"){
                //1.将数据回显在弹出层的from表单中
                form.val("updateForm",data);
                var updateIndex = layer.open({
                    type:1,
                    title:"<h2 align='center'>修改品牌</h2>",
                    content:$("#updateForm"),
                    area:['500px', '400px'],
                });
                //2.获取form表单的数据，发出ajax修改数据

                form.on("submit(up)",function(obj){
                    var data = obj.field;
                    layer.confirm('确认修改吗？', function(index){

                        $.ajax({
                            url:"${pageContext.request.contextPath}/pms-brand/update",
                            data:data,
                            type:"post",
                            dataType:"json",
                            success: function (data) {
                                if(data.result == 0){
                                    layer.msg("修改成功");
                                    layer.close(updateIndex);
                                    table.reload("demo");
                                }
                            }
                        });
                        layer.close(index);
                    });
                    return false;
                });
            }else if(layEvent == "del"){
                layer.confirm('真的删除行么', function(index){

                    $.ajax({
                        url:"${pageContext.request.contextPath}/pms-brand/delete",
                        data:"id="+data.id,
                        type:"post",
                        dataType:"json",
                        success: function (data) {
                            if(data.result == 0){
                                layer.msg("删除成功");
                            }
                        }
                    });
                    layer.close(index);
                });
            }else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
        //文件上传---开始
        var upload = layui.upload;
        upload.render({
            elem:"#uploadOne",
            accept:"file",
            url : "${pageContext.request.contextPath}/cmfz-guru/upload",
            done : function (res) {
                //上传完毕回调
                if(res.code == 0){
                    layer.msg("上传成功！");
                    layer.close(addIndex);
                }
            }
        });
        //文件上传---结束
        var form = layui.form;
        var addIndex;
        //启用弹出层添加数据
        $("#upload").click(function () {
            addIndex = layer.open({
                type:1,
                title:"<h2 align='center'>文件上传</h2>",
                content:$('#uploadExcel'),
                skin: 'demo-class',
                area: ['300px', '150px']
            });
        });
        //批量下载的操作
        $("#download").click(function () {
            var checkStatus = table.checkStatus('demo'); //idTest 即为基础参数 id 对应的值
            if(checkStatus.data.length>0){

                layer.confirm('小可爱！确定下载么', function(index){
                    //得到选中行的id并把它拼接成字符串
                    var ids="";
                    for(var i=0;i<checkStatus.data.length;i++){
                        ids += "ids="+checkStatus.data[i].guruId+"&";
                    }
                    ids = ids.substring(0,ids.length-1);
                    window.location.href = "${pageContext.request.contextPath}/cmfz-guru/downloadMany?" + ids;
                    table.reload("demo");
                    layer.close(index);
                });
            }

            else {
                layer.msg("请先选中数据");
            }
        });

        form.on('submit(go)',function (obj) {
            var book = obj.field;
            $.ajax({
                url:"${pageContext.request.contextPath}/pms-brand/add",
                type:"post",
                data:book,
                dataType:"json",
                success:function (data) {
                    if(data.code == 0){
                        //关闭弹出层
                        layer.close(addIndex);
                        //清除表单中的数据
                        obj.form.reset();
                        layer.msg("添加成功！");
                        table.reload("demo");
                    }
                }
            });
            return false;
        });
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>
